<!--  -->
<template>
  <div class="home-container">
    <div class="herder">
      <img src="../assets/img/title.png" alt="" />
      <div class="time">{{ formattedDate }}</div>
    </div>
    <div class="content">
      <!-- 左边 -->
      <div class="item-box1">
        <div class="item">
          <div class="item-top"></div>
          <div class="item-top-bg">
            <div class="item-bg-img"></div>
            <span>{{ currentYear }}各区基本数据公示</span>
          </div>
          <div class="item-conent">
            <scrollBoard v-if="data1.length > 0" :dataList="data1"></scrollBoard>
          </div>
        </div>
        <div class="item">
          <div class="item-top"></div>
          <div class="item-top-bg">
            <div class="item-bg-img"></div>
            <span>食用农产品交易数据分析</span>
          </div>
          <div class="item-conent">
            <div class="ic-left">
              <pie></pie>
            </div>
            <div class="ic-right">
              <item-3 v-if="data2.length > 0" :dataList="data2"></item-3>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="item-top"></div>
          <div class="item-top-bg">
            <div class="item-bg-img"></div>
            <span>食用农产品快检数据公示</span>
          </div>
          <div class="item-conent">
            <scrollBoard2></scrollBoard2>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="item-box2">
        <div class="item box2-item1">
          <div class="item-top"></div>
          <div class="item-top-bg">
            <div class="item-bg-img"></div>
            <span>食用农产品交易数据分析</span>
          </div>
          <div class="item-conent item-conent4">
            <div class="item4c-top">
              <span class="border-t-l"></span>
              <span class="border-t-r"></span>
              <span class="border-b-l"></span>
              <span class="border-b-r"></span>
              <div class="item4c-title">溯源数据汇总</div>
              <el-carousel class="item5c-conter-item" :autoplay="true" :interval="5000">
                <el-carousel-item class="carousel-item">
                  <div class="item4c-grid">
                    <div class="item4c-grid-1">
                      <span class="item4c-grid-11">检测项目总数</span>
                      <span class="item4c-grid-12">{{ detection.jcxlzs }}</span>
                    </div>
                    <div class="item4c-grid-1">
                      <span class="item4c-grid-11">检测样品种类</span>
                      <span class="item4c-grid-12">{{ detection.jcypzl }}</span>
                    </div>

                    <div class="item4c-grid-1">
                      <span class="item4c-grid-11">阳性总数</span>
                      <span class="item4c-grid-12">{{ detection.yxzs }}</span>
                    </div>
                    <div class="item4c-grid-1">
                      <span class="item4c-grid-11">阳性处置率</span>
                      <span class="item4c-grid-12">{{ detection.yxczl }}</span>
                    </div>
                  </div>
                </el-carousel-item>
                <el-carousel-item>
                  <div class="item4c-grid">
                    <div class="item4c-grid-2">
                      <span class="item4c-grid-11">经营户总数</span>
                      <span class="item4c-grid-12">{{ detection.jyhzs }}</span>
                    </div>
                    <div class="item4c-grid-2">
                      <span class="item4c-grid-11">溯源接入率</span>
                      <span class="item4c-grid-12">{{ detection.syjrl }}</span>
                    </div>
                    <div class="item4c-grid-2">
                      <span class="item4c-grid-11">溯源使用率</span>
                      <span class="item4c-grid-12">{{ detection.sysyl }}</span>
                    </div>
                    <div class="item4c-grid-2">
                      <span class="item4c-grid-11">摊位使用率</span>
                      <span class="item4c-grid-12">{{ detection.twsyl }}</span>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>

              <!-- <div class="item4c-grid item4c-grid2">
                <div class="item4c-grid-2">
                  <span class="item4c-grid-11">经营户总数</span>
                  <span class="item4c-grid-12">{{ detection.jyhzs }}</span>
                </div>
                <div class="item4c-grid-2">
                  <span class="item4c-grid-11">溯源接入率</span>
                  <span class="item4c-grid-12">{{ detection.syjrl }}</span>
                </div>
                <div class="item4c-grid-2">
                  <span class="item4c-grid-11">溯源使用率</span>
                  <span class="item4c-grid-12">{{ detection.sysyl }}</span>
                </div>
                <div class="item4c-grid-2">
                  <span class="item4c-grid-11">摊位使用率</span>
                  <span class="item4c-grid-12">{{ detection.twsyl }}</span>
                </div>
              </div> -->
            </div>
          </div>
          <div class="item4c-conter">
            <div class="item4c-conter-item">
              <div class="item4c-conter-item11">
                <span class="border-t-l"></span>
                <span class="border-t-r"></span>
                <span class="border-b-l"></span>
                <span class="border-b-r"></span>
                <div class="item4c-conter-item11_txt">检测总批次</div>
                <div class="item4c-conter-item11_txt1">{{ detection.jczpc }}</div>
              </div>
              <div style="width: 100%;height: 20px"></div>
              <div class="item4c-conter-item12">
                <span class="border-t-l"></span>
                <span class="border-t-r"></span>
                <span class="border-b-l"></span>
                <span class="border-b-r"></span>
                <div class="item4c-conter-item11_txt">检测合格率</div>
                <div class="item4c-conter-item11_txt1">{{ detection.jchgl }}</div>
              </div>
            </div>
            <div class="item4c-conter-item1">
              <span class="border-t-l"></span>
              <span class="border-t-r"></span>
              <span class="border-b-l"></span>
              <span class="border-b-r"></span>
              <item-4></item-4>
            </div>
          </div>
          <div class="item5c-conter">
            <div class="item5c-conter-txt">检测项目分析</div>
            <el-carousel class="item5c-conter-item" :autoplay="true" :interval="5000">
              <el-carousel-item
                class="carousel-item"
                v-for="(item, i) in productList"
                :key="'itme' + i"
              >
                <div class="carousel-item-1" v-for="(temp, index) in item" :key="index">
                  <item-5 key="item51" :dataNum="temp.bfb"></item-5>
                  <span>{{ temp.name }} {{ temp.jcsum }}</span>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div class="item box2-item2">
          <div class="item-top"></div>
          <div class="item-top-bg">
            <div class="item-bg-img"></div>
            <span>食用农产品检测和交易时间段趋势</span>
          </div>
          <div class="item-conent">
            <item-6></item-6>
          </div>
        </div>
      </div>
      <!-- 右边 -->
      <div class="item-box3">
        <div class="item box3-item1">
          <div class="item-top"></div>
          <div class="item-top-bg">
            <div class="item-bg-img"></div>
            <span>食用农产品安全指数</span>
          </div>
          <div class="item-content item7-conent">
            <div class="item7-conent-item">
              <div class="item7-item" v-for="(item, index) in aqzsList.slice(0, 4)" :key="index">
                <div class="item7-item-t">
                  <item-7 :data="item"></item-7>
                </div>
                <div class="item7-item-b">
                  <div>抽检量 {{ item.jcsum }}</div>
                  <div>不合格数量 {{ item.bhgsum }}</div>
                </div>
              </div>
            </div>
            <div class="item7-conent-item">
              <div class="item7-item" v-for="(item, index) in aqzsList.slice(4, 8)" :key="index">
                <div class="item7-item-t">
                  <item-7 :data="item"></item-7>
                </div>
                <div class="item7-item-b">
                  <div>抽检量 {{ item.jcsum }}</div>
                  <div>不合格数量 {{ item.bhgsum }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="item box3-item2">
          <div class="item-top"></div>
          <div class="item-top-bg">
            <div class="item-bg-img"></div>
            <span>食用农产品产地（来源）分析</span>
          </div>
          <div class="item-content item8-content">
            <item-8></item-8>
          </div>
        </div>
        <div class="item box3-item3">
          <div class="item-top"></div>
          <div class="item-top-bg">
            <div class="item-bg-img"></div>
            <span>食用农产品疑似阳性风险预警</span>
          </div>
          <div class="item-conent item9-conent">
            <div class="item9-conent-1">
              <item-9></item-9>
            </div>
            <div class="item9-conent-1">
              <item-10 v-if="data3.length > 0" :dataList="data3"></item-10>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="foot">
      <span class="f-l"></span>
      <span class="f-c">食源安技术服务泰州有限公司提供技术支持</span>
      <span class="f-r"></span>
    </div>
  </div>
</template>

<script>
import { getLunar } from 'chinese-lunar-calendar';
import Pie from '../views/pie.vue';
import scrollBoard from '../views/scroll-board.vue';
import Item3 from '../views/item3.vue';
import Item4 from '../views/item4.vue';
import Item5 from '../views/item5.vue';
import Item6 from './item6.vue';
import Item7 from './item7.vue';
import Item8 from './item8.vue';
import Item9 from './item9.vue';
import Item10 from './item10.vue';
import ScrollBoard2 from './scroll-board2.vue';
import api from '../utils/api';
import { Carousel as ElCarousel, CarouselItem as ElCarouselItem } from 'element-ui';
export default {
  name: 'Home',
  components: {
    scrollBoard,
    Pie,
    Item3,
    Item4,
    Item5,
    Item6,
    Item7,
    Item8,
    Item9,
    Item10,
    ScrollBoard2,
    ElCarousel,
    ElCarouselItem,
  },
  data() {
    return {
      formattedDate: '',
      data1: [],
      data2: [],
      data3: [],
      detection: {},
      productList: [],
      aqzsList: [],
      currentYear: '2024',
    };
  },
  created() {
    this.currentYear = new Date().getFullYear();
  },
  mounted() {
    this.updateTime();
    setInterval(() => {
      this.updateTime();
    }, 1000);
    // 2023各区基本数据公示  查询当年数据
    api.getJcsjGsByPFMarket().then((res) => {
      if (res.data.length > 0) {
        this.data2 = res.data;
        this.data3 = res.data;
        res.data.forEach((item) => {
          this.data1.push([
            item.jiancheng,
            item.jyhsum,
            item.jcsum,
            item.bhgsum,
            item.jylsum,
            item.jrl,
            item.syl,
          ]);
        });
      }
    });
    api.sleSJFXByPFMarket().then((res) => {
      console.log(res);
      this.detection = res.data;
    });
    api.getJCXMFXByPFMarket().then((res) => {
      const groupSize = 4; // 定义每组的大小
      for (let i = 0; i < res.data.length; i += groupSize) {
        const group = res.data.slice(i, i + groupSize); // 从原数组中截取一组
        this.productList.push(group); // 将这组数据添加到结果数组中
      }
    });
    api.getDYNCPByPFMarket().then((res) => {
      this.aqzsList = res.data;
    });
  },
  methods: {
    updateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const oldYear = getLunar(now.getFullYear(), now.getMonth() + 1, now.getDate());
      const month = (now.getMonth() + 1).toString().padStart(2, '0');
      const day = now
        .getDate()
        .toString()
        .padStart(2, '0');
      const hours = now
        .getHours()
        .toString()
        .padStart(2, '0');
      const minutes = now
        .getMinutes()
        .toString()
        .padStart(2, '0');
      const seconds = now
        .getSeconds()
        .toString()
        .padStart(2, '0');
      this.formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} 农历${oldYear.dateStr}`;
    },
  },
};
</script>

<style lang="less" scoped>
.home-container {
  height: 100vh;
  background-color: #091434;
  position: relative;
  .herder {
    width: 100%;
    height: 81px;
    background: url('../assets/img/herder_bg.png');
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .time {
      font-size: 16px;
      right: 30px;
      bottom: 0;
      position: absolute;
      color: #fff;
    }
    img {
      width: 715.2px;
      height: 35.68px;
    }
  }
  .content {
    padding: 20px 32px;
    padding-bottom: 0px;
    height: calc(100% - 154px);
    display: flex;
    justify-content: center;
    position: relative;
    .item-box1,
    .item-box2,
    .item-box3 {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      position: relative;
      .item {
        border: 1px solid #2b5cf6;
        box-sizing: content-box;
        margin-bottom: 24px;
        display: flex;
        flex-direction: column;
        position: relative;
        &:last-child {
          margin-bottom: 0;
        }
        // margin: 20px;
        .item-top {
          min-height: 36px;
          height: 36px;
          background: linear-gradient(360deg, #007fff 0%, rgba(43, 92, 246, 0) 100%);
          border-radius: 0px 0px 0px 0px;
          opacity: 0.5;
          font-size: 20px;
          color: #fff;
          position: relative;
          span {
            position: absolute;
            top: 0;
            left: 0;
            font-size: 20px;
            color: #fff;
            background-color: rgba(0, 0, 0, 0);
          }
        }
        .item-top-bg {
          position: absolute;
          top: 0;
          height: 36px;
          display: flex;
          align-items: center;
          font-size: 20px;
          color: #ffffff;
          padding-left: 15px;
          .item-bg-img {
            width: 19.5px;
            height: 9px;
            background-image: url('../assets/img/top-bg.png');
            background-size: 100%;
            margin-right: 12px;
          }
          span {
            font-size: 16px;
            color: #fff;
          }
        }
        .item-conent {
          flex: 1;
          padding: 0 11px;
          display: flex;
          background-color: #0d1b46;
          .ic-left {
            width: 40%;
            height: 100%;
          }
          .ic-right {
            width: 60%;
            height: 100%;
          }
        }
      }
    }
    .item-box1 {
      .item {
        margin-right: 24px;
        height: 33.333%;
      }
    }
    .item-box2 {
      .box2-item1 {
        margin-right: 8px;
        height: 70%;
        box-sizing: content-box;
        margin-bottom: 24px;
        display: flex;
        flex-direction: column;
        position: relative;
        background-color: #101b44;
        .item-top {
          height: 36px;
          background: linear-gradient(360deg, #007fff 0%, rgba(43, 92, 246, 0) 100%);
          border-radius: 0px 0px 0px 0px;
          opacity: 0.5;
          font-size: 20px;
          color: #fff;
          position: relative;
          span {
            position: absolute;
            top: 0;
            left: 0;
            font-size: 20px;
            color: #fff;
            background-color: rgba(0, 0, 0, 0);
          }
        }
        .item-top-bg {
          position: absolute;
          top: 0;
          height: 36px;
          display: flex;
          align-items: center;
          font-size: 20px;
          color: #ffffff;
          padding-left: 15px;
          .item-bg-img {
            width: 19.5px;
            height: 9px;
            background-image: url('../assets/img/top-bg.png');
            background-size: 100%;
            margin-right: 12px;
          }
        }
        .item-conent {
          flex: 1;
          padding: 0 11px;
          display: flex;
        }
        .item-conent4 {
          padding: 12px 16px;
          height: 30%;
          flex: none;

          .item4c-top {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            border: 1px dashed rgba(255, 255, 255, 0.3);
            position: relative;
            // padding: 0 18px;
            background-color: #101b44;
            .border-t-l {
              width: 4px;
              height: 4px;
              border-left: 1px solid #76fbfd;
              border-top: 1px solid #76fbfd;
              position: absolute;
              top: -1px;
              left: -1px;
            }
            .border-t-r {
              width: 4px;
              height: 4px;
              border-right: 1px solid #76fbfd;
              border-top: 1px solid #76fbfd;
              position: absolute;
              top: -1px;
              right: -1px;
            }
            .border-b-l {
              width: 4px;
              height: 4px;
              border-left: 1px solid #76fbfd;
              border-bottom: 1px solid #76fbfd;
              position: absolute;
              bottom: -1px;
              left: -1px;
            }
            .border-b-r {
              width: 4px;
              height: 4px;
              border-right: 1px solid #76fbfd;
              border-bottom: 1px solid #76fbfd;
              position: absolute;
              bottom: -1px;
              right: -1px;
            }
          }
          .item4c-title {
            margin: 6px 0px 9px 10px;
            font-size: 16px;
            color: #ffffff;
          }
          .item4c-grid {
            display: flex;
            flex-wrap: wrap;
            font-size: 14px;
            color: #ffffff;
            height: 100%;
            width: 100%;
            padding: 15px 0;
            box-sizing: border-box;
            .item4c-grid-1,
            .item4c-grid-2 {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              flex: 1;
              height: 100%;
              // border-bottom: 1px dashed #385bed;
              border-right: 1px dashed #385bed;

              &:last-child {
                border-right: none;
              }
              .item4c-grid-11 {
                font-size: 22px;
                padding-top: 8px;
                margin-bottom: 15px;
                position: relative;
              }
              .item4c-grid-12 {
                font-family: Digital-7-Regular, Digital-7;
                line-height: 28px;
                font-size: 28px;
                color: #1eeeff;
                padding-bottom: 8px;
                position: relative;
              }
            }
            .item4c-grid-2 {
              border-bottom: none;
            }
          }
        }
        .item4c-conter {
          padding: 0 16px;
          display: flex;
          height: 30%;
          .item4c-conter-item {
            width: 30%;
            height: 100%;
            box-sizing: content-box;
            margin-right: 20px;
            display: flex;
            flex-direction: column;
            .item4c-conter-item11,
            .item4c-conter-item12 {
              width: 100%;
              position: relative;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              padding: 5px 0;
              box-sizing: content-box;

              .item4c-conter-item11_txt {
                font-size: 14px;
                color: #fff;
              }
              .item4c-conter-item11_txt1 {
                margin-top: 10px;
                font-size: 30px;
                color: #1eeeff;
              }
            }
            .item4c-conter-item11 {
              border: 1px dashed rgba(255, 255, 255, 0.3);
              background-color: #1a2247;
            }
            .item4c-conter-item12 {
              width: 100%;
              position: relative;
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
          }
          .item4c-conter-item1 {
            width: 70%;
            position: relative;
            border: 1px dashed rgba(255, 255, 255, 0.3);
            background-color: #18224a;
          }
        }
        .item5c-conter {
          height: 30%;
          margin: 12px 16px;
          box-sizing: content-box;
          border: 1px dashed rgba(255, 255, 255, 0.3);
          background-color: #18224a;
          padding: 0 34px;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          .item5c-conter-txt {
            font-size: 14px;
            color: #fff;
            position: absolute;
            top: 7px;
            left: 9px;
          }
        }
        .item4c-grid2 {
        }
        .item4c-grid1 {
          width: 100%;
          height: 12px;
        }
      }
      .box2-item2 {
        margin-right: 8px;
        height: 30%;
      }
    }
    .item-box3 {
      .box3-item1 {
        height: 36%;
        .item7-conent {
          display: flex;
          flex-direction: column;
          height: 100%;
          padding: 10px 15px;
          background-color: #0d1b46;
          .item7-conent-item {
            height: 50%;
            display: flex;
            .item7-item {
              position: relative;
              flex: 1;
              height: 100%;
              .item7-item-t {
                height: 70%;
              }
              .item7-item-b {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 12px;
                color: #fff;
                position: absolute;
                bottom: 10px;
              }
            }
          }
        }
      }
      .box3-item2 {
        height: 34%;
        .item8-content {
          height: 100%;
          padding: 10px 0;
          background-color: #0d1b46;
        }
      }
      .box3-item3 {
        height: 32%;
        .item9-conent {
          display: flex;
          padding-top: 16px;
          .item9-conent-1 {
            width: 50%;
            height: 100%;
          }
        }
      }
    }
  }
  .foot {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 53px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #c3c3c3;
    padding: 0 32px;
    box-sizing: content-box;
    .f-l {
      flex: 1;
      height: 1px;
      border-bottom: 1px solid #666c7c;
    }
    .f-c {
      display: flex;
      margin: 0 22px;
    }
    .f-r {
      flex: 1;
      height: 1px;
      border-bottom: 1px solid #666c7c;
    }
  }
}
.border-t-l {
  width: 4px;
  height: 4px;
  border-left: 1px solid #76fbfd;
  border-top: 1px solid #76fbfd;
  position: absolute;
  top: -1px;
  left: -1px;
}
.border-t-r {
  width: 4px;
  height: 4px;
  border-right: 1px solid #76fbfd;
  border-top: 1px solid #76fbfd;
  position: absolute;
  top: -1px;
  right: -1px;
}
.border-b-l {
  width: 4px;
  height: 4px;
  border-left: 1px solid #76fbfd;
  border-bottom: 1px solid #76fbfd;
  position: absolute;
  bottom: -1px;
  left: -1px;
}
.border-b-r {
  width: 4px;
  height: 4px;
  border-right: 1px solid #76fbfd;
  border-bottom: 1px solid #76fbfd;
  position: absolute;
  bottom: -1px;
  right: -1px;
}
</style>

<style lang="less">
.item5c-conter-item {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  span {
    font-size: 14px;
    color: #fff;
    position: absolute;
    bottom: 5%;
  }
  .el-carousel__container {
    width: 100%;
    height: 100%;
    display: flex;
  }
  .carousel-item {
    display: flex;
    width: 100%;
    height: 100%;
    .carousel-item-1 {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
  }
}
.el-carousel__indicators {
  display: none;
}
</style>
